@height-base: 32px;
@height-xl: 48px;
@height-lg: 40px;
@height-sm: 24px;
@height-xs: 16px;

.switch-size(@h; @font-size) {
  min-width: @h*2;
  height: @h;
  font-size: @font-size;

  .nom-switch-indicator {
    width: calc(@h - 4px);
    height: calc(@h - 4px);
  }
}

.nom-switch {
  >.nom-field-content {
    .nom-switch-control {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      color: var(--nom-switch-btn-bg-color);
      background-color: var(--nom-switch-bg-color);
      border: none;
      border-radius: 100px;
      outline: none;
      cursor: pointer;
      transition: background-color .2s ease-in-out;

      i {
        position: absolute;
        display: block;
        border-radius: inherit;
        box-shadow: 0 0 0 0 var(--nom-color-primary);
        opacity: .2;
        -webkit-animation: fadeeffect 2s cubic-bezier(.08, .82, .17, 1), waveeffect .4s cubic-bezier(.08, .82, .17, 1);
        animation: fadeEffect 2s cubic-bezier(.08, .82, .17, 1), waveEffect .4s cubic-bezier(.08, .82, .17, 1);
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        content: "";
        pointer-events: none;
        inset: 0
      }

      &.nom-switch-active {
        background-color: var(--nom-color-primary);
      }

      .nom-switch-text {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .nom-switch-indicator {
        width: calc(var(--nom-switch-height-base) - 4px);
        height: calc(var(--nom-switch-height-base) - 4px);
        background-color: var(--nom-switch-indicator-bg-color);
        border-radius: 50%;
      }

      .nom-switch-indicator-left {
        -webkit-animation: nom-switch-keyframe-right-show .24s linear forwards;
        animation: nom-switch-keyframe-right-show .24s linear forwards;
      }

      .nom-switch-indicator-right {
        -webkit-animation: nom-switch-keyframe-left-show .24s linear forwards;
        animation: nom-switch-keyframe-left-show .24s linear forwards;
      }

      .nom-switch-text-left {
        -webkit-animation: nom-switch-keyframe-right-show .24s linear forwards;
        animation: nom-switch-keyframe-right-show .24s linear forwards;
      }

      .nom-switch-text-right {
        -webkit-animation: nom-switch-keyframe-left-show .24s linear forwards;
        animation: nom-switch-keyframe-left-show .24s linear forwards;
      }

      .switch-size(@height-base; @font-size-base);
    }
  }

  &.p-size-small {
    >.nom-field-content {
      .nom-switch-control {
        .switch-size(@height-sm; @font-size-sm);
      }
    }
  }

  &.p-size-xsmall {
    >.nom-field-content {
      .nom-switch-control {
        .switch-size(@height-xs; var(--nom-switch-font-size-xs));
      }
    }
  }

  &.p-size-large {
    >.nom-field-content {
      .nom-switch-control {
        .switch-size(@height-lg; @font-size-lg);
      }
    }
  }

  &.p-size-xlarge {
    >.nom-field-content {
      .nom-switch-control {
        .switch-size(@height-xl; @font-size-xl);
      }
    }
  }

  &.s-disabled {
    >.nom-field-content {
      .nom-switch-control {
        background-color: var(--nom-switch-disable-color);

        .nom-switch-text {
          color: var(--nom-switch-disable-text);
        }
      }

      .nom-switch-active {
        background-color: var(--nom-color-primary-disabled) !important;
      }
    }
  }
}



@-webkit-keyframes waveEffect {
  to {
    box-shadow: 0 0 0 6px var(--nom-color-primary)
  }
}

@keyframes waveEffect {
  to {
    box-shadow: 0 0 0 6px var(--nom-color-primary)
  }
}

@-webkit-keyframes fadeEffect {
  to {
    opacity: 0
  }
}

@keyframes fadeEffect {
  to {
    opacity: 0
  }
}

@-webkit-keyframes nom-switch-keyframe-left-show {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes nom-switch-keyframe-left-show {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-switch-keyframe-right-show {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes nom-switch-keyframe-right-show {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
}
